<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
	
		var myLatlng = new google.maps.LatLng(-32,135.763333);
		var myOptions = {
			zoom: 6,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}
		
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		// icon definitions
		var dGreen  = 'letter-d-green.png';
		var dOrange = 'letter-d-orange.png';
		var dPurple = 'letter-d-purple.png';
		
		var hGreen  = 'letter-h-green.png';
		var hOrange = 'letter-h-orange.png';
		var hPurple = 'letter-h-purple.png';
		
		var oGreen  = 'letter-o-green.png';
		var oOrange = 'letter-o-orange.png';
		var oPurple = 'letter-o-purple.png';
		
		var tGreen  = 'letter-t-green.png';
		var tOrange = 'letter-t-orange.png';
		var tPurple = 'letter-t-purple.png';
	
		$.getJSON('sa-mockup-data.json', function(data) {
		
			$.each(data, function(i, datum){
			
				var mLatLng = new google.maps.LatLng(datum.latitude, datum.longitude);
				
				// determine which icon to use
				var icon;
				
				if(datum.type == 'Cinema') {
				
					if(datum.locality == 'Central Business District') {
						icon = hPurple;
					}
					
					if (datum.locality == 'Suburban') {
						icon = hOrange;
					}
					
					if(datum.locality == 'Country/Rural') {
						icon = hGreen;
					}
				
				}
				
				if(datum.type == 'Drive-in') {
				
					if(datum.locality == 'Central Business District') {
						icon = dPurple;
					} else if (datum.locality == 'Suburban') {
						icon = dOrange;
					} else {
						icon = dGreen;
					}
				
				}
				
				if(datum.type == 'Open Air') {
				
					if(datum.locality == 'Central Business District') {
						icon = oPurple;
					} else if (datum.locality == 'Suburban') {
						icon = oOrange;
					} else {
						icon = oGreen;
					}
				
				}
				
				if(datum.type == 'Touring Circuit') {
				
					if(datum.locality == 'Central Business District') {
						icon = tPurple;
					} else if (datum.locality == 'Suburban') {
						icon = tOrange;
					} else {
						icon = tGreen;
					}
				
				}
				
				var marker = new google.maps.Marker({
					position: mLatLng, 
					map: map,
					icon: icon
				});
				
				
			});
		});
	});

</script>
</head>
<body>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>